<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>幸运抽签</title>
	<link rel="icon" href="./xing.png" type="image/x-icon" />
</head>
<style>
	@font-face {
		font-family:myfont;
		src:url('Kingsoft_Cloud_Font.ttf');
	}
	*{

		padding: 0;
		margin: 0;
	}
	body{
		width: 100vw;
		height: 100vh;
	}
	.name{
		width: 100%;
		background-image: url("./78ff028858a9500d7a7ca968fc4b99d.jpg") ;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 100%;
		/*background: #000;*/
		display: flex;
		align-items: center;
		justify-content: center;

	}
	.box{
		font-family: myfont;
		min-width: 25vw;
		height: 10vw;
		border: 5px solid #ffea9f;
		padding: 2vw;
		/*background-color: aquamarine;*/
		border-radius: 2vw;
		font-size: 8vw;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0  0px 30px -2px  #000;
	}
	.text{
		background-image: linear-gradient(0deg , #f8c282, #feeaa1);
		-webkit-background-clip: text;
		color: transparent;

	}
</style>
<body>
<div class="name">
	<div class="box">
		<span class="text" >幸运儿</span>
	</div>
<!--	<button>点名</button>-->
</div>
<script type="module">
	import {arr} from './index.js'
	var btn = document.querySelector('body');
	var box = document.querySelector('.text');
	console.log(arr);
	var flag = false;
	var ds;
	const myRandom = function (start, end){
		const array = new Uint32Array(1),
						maxUint = 0xffffffff   //maxUint为最大的可能值
		const randomNum = crypto.getRandomValues(array)[0] / maxUint
		return Math.floor((end - start + 1) * randomNum + start)
	}

	btn.addEventListener('click',function(){
		flag = !flag;
		if(flag) {
			ds = setInterval(function(){
				// 方法一：真随机数
				// getRandomValues()最多可以生成2^16（65 536）字节
				box.innerHTML = arr[myRandom(0,arr.length-1)];
				// 方法二：为随机数
				// var index = Math.round(Math.random()*(arr.length-1));
				box.innerHTML = arr[index];
			},50);
			// btn.innerHTML = '暂停';
		} else{
			clearInterval(ds);
			// btn.innerHTML = '点名';
		}
	});
</script>

</body>
</html>
